<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        @-webkit-keyframes rock {
            0%{-webkit-transform:rotateX(-20deg);}
            20%{-webkit-transform:rotateX(20deg);}
            40%{-webkit-transform:rotateX(-10deg);}
            60%{-webkit-transform:rotateX(10deg);}
            80%{-webkit-transform:rotateX(-5deg);}
            100%{-webkit-transform:rotateX(0deg);}
        }
        body, h3{margin:0;}
        ul{margin:0;padding:0;}
        li{list-style:none;}
        a{text-decoration:none;}

        .clear{zoom:1;}
        .clear:after{content:'';display:block;clear:both;}

        body{background:url("img/bg.jpg") center 0 repeat-x;}
        header{width:960px;height:90px;background:url("img/logo.png") 31px 23px no-repeat;margin:0 auto;}
        /* 顶部 */
        #top{height:28px;}
        #top ul{float:right;}
        #top li{height:10px;float:left;padding:14px 30px 0 0;}
        #top a{font-size:10px;color:#7d8870;}
        /* 顶部 */

        /* 导航 */
        nav .nav{float:right;}
        nav .item{line-height:48px;padding:0 56px 0 4px;float:left;position:relative;}
        nav .item>a{font-size:18px;font-weight:bold;color:#7cab38;}
        nav .submenue{width:410px;background:url("img/triangle.png") no-repeat 34px 0 #fff;padding:4px;border-radius:8px;
            position:absolute;left:0;display:none;}
        nav .item:nth-of-type(1) .submenue{left:0;}
        nav .item:nth-of-type(2) .submenue{left:-100px;background-position:144px 0;}
        nav .item:nth-of-type(3) .submenue{left:-150px;background-position:194px 0;}
        nav .item:nth-of-type(4) .submenue{left:-220px;background-position:254px 0;}
        nav .item:nth-of-type(5) .submenue{left:-330px;background-position:364px 0;}
        nav .item:hover .submenue{display:block;}
        nav .submenue ul{height:30px;background:#5d74bd;border-radius:6px;}
        nav .submenue li{float:left;padding:0 8px 0 26px;line-height:30px;}
        nav .submenue a{font-size:14px;color:#fff;}
        /* 导航 */

        article{width:960px;margin:0 auto;}
        .left{padding-left:8px;-webkit-transform-style:preserve-3d;perspective:800px;}
        .login{width:200px;height:124px;padding:58px 20px 0;background:url("img/login_bg.png") no-repeat;
            -webkit-transform-origin:top;-webkit-animation:rock 2s;transition:1s;}
        .login:hover{-webkit-transform:scale(3);}
        .login h3{height:26px;line-height:30px;font-size:12px;text-align:center;color:#8bb85b;}
        .login div{padding-top:2px;}
        .login label{width:46px;display:inline-block;font-size:10px;color:#3e600d;}
        .login input{width:90px;border:1px solid #7cab38;}
        .login .bottom{padding-top:6px;text-align:center;}
        .login .bottom a{line-height:20px;background:#51ccb3;border:1px solid #33a790;font-size:10px;color:#fff;display:inline-block;padding:0 16px;}


        .plan{width:220px;height:372px;padding:10px 10px 10px 22px;margin-top:14px;background:url("img/plan.png") 12px 0 no-repeat;}
        .plan h3{height:44px;background:url("img/icon.png") no-repeat;}
    </style>
</head>
<body>
    <header>
        <div id="top" class="clear">
            <ul>
                <li><a href="#">마이페이지</a></li>
                <li><a href="#">도와드릴까요?</a></li>
                <li><a href="#">학부모마당</a></li>
                <li><a href="#">전체보기</a></li>
            </ul>
        </div>
        <nav class="clear">
            <ul class="nav">
                <li class="item">
                    <a href="#">교과학습</a>
                    <div class="submenue">
                        <ul class="clear">
                            <li><a href="#">도와드릴까요</a></li>
                            <li><a href="#">학부모마당</a></li>
                            <li><a href="#">전체보기</a></li>
                            <li><a href="#">전체보기</a></li>
                        </ul>
                    </div>
                </li>
                <li class="item">
                    <a href="#">도와드릴까요</a>
                    <div class="submenue">
                        <ul class="clear">
                            <li><a href="#">도와드릴까요</a></li>
                            <li><a href="#">학부모마당</a></li>
                            <li><a href="#">전체보기</a></li>
                            <li><a href="#">전체보기</a></li>
                        </ul>
                    </div>
                </li>
                <li class="item">
                    <a href="#">학부모마당</a>
                    <div class="submenue">
                        <ul>
                            <li><a href="#">도와드릴까요?</a></li>
                            <li><a href="#">학부모마당</a></li>
                            <li><a href="#">전체보기</a></li>
                            <li><a href="#">전체보기</a></li>
                        </ul>
                    </div>
                </li>
                <li class="item">
                    <a href="#">전체보기</a>
                    <div class="submenue">
                        <ul>
                            <li><a href="#">도와드릴까요?</a></li>
                            <li><a href="#">학부모마당</a></li>
                            <li><a href="#">전체보기</a></li>
                            <li><a href="#">전체보기</a></li>
                        </ul>
                    </div>
                </li>
                <li class="item">
                    <a href="#">교과학습</a>
                    <div class="submenue">
                        <ul>
                            <li><a href="#">도와드릴까요?</a></li>
                            <li><a href="#">학부모마당</a></li>
                            <li><a href="#">전체보기</a></li>
                            <li><a href="#">전체보기</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </header>

    <article>
        <div class="left">
            <section class="login">
                <div class="content clear">
                    <h3>登&nbsp录</h3>
                    <div class="usr">
                        <label>用户名</label>
                        <input type="text" value="" />
                    </div>
                    <div class="pwd">
                        <label>密码</label>
                        <input type="password" value="" />
                    </div>
                </div>
                <div class="bottom">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </div>
            </section>

            <section class="plan">
                <div class="top">
                    <h3></h3>
                </div>

            </section>
        </div>
        <div class="right">

        </div>
    </article>
    <script>

    </script>
</body>
</html>